/**
 * @file icon-button
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {Renderer, render, evalExpression} from './renderer';
import OnExpression from './hoc/on-expression';
import * as cx from 'classnames';
import * as onClickOutside from 'react-onclickoutside';
import * as schema from './dropdown-button-schema.json';

import {
  DropdownButton,
  MenuItem
} from 'react-bootstrap';

@Renderer({
  name: 'dropdown-button',
  desc: '...',
  test: (path, config) => /\/dropdown-button/.test(path),
  schema: schema,
  validateSchema: true
})
@OnExpression
@onClickOutside
export default class DropDownButtonRenderer extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    onRequestAction: PropTypes.func,
    location: PropTypes.object,
    buttons: PropTypes.arrayOf(PropTypes.shape({
      type: PropTypes.oneOf(['button', 'action'])
    })).isRequired
  };

  static defaultProps = {
    className: '',
    btnClassName: 'btn-default'
  };

  constructor(props) {
    super(props);

    this.state = {
      open: false
    };

    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
    this.toggle = this.toggle.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  open() {
    this.setState({
      open: true
    });
  }

  close() {
    this.setState({
      open: false
    });
  }

  toggle() {
    this.setState({
      open: !this.state.open
    });
  }

  handleClickOutside() {
    this.close();
  }

  handleMenuItemClick(button) {
    const {
      onRequestAction,
      item,
      data
    } = this.props;

    onRequestAction(button, item || data);
    this.close();
    return false;
  }

  render() {
    const {
      className,
      label,
      btnLabel,
      buttons,
      disabled,
      size,
      data,
      level,
      block,
      primary
    } = this.props;

    return (
      <div
        className={cx('dropdown btn-group', {
          'btn-group-block': block,
          'open': this.state.open
        })}
      >
        <button
          onClick={this.toggle}
          disabled={disabled}
          className={cx('btn', className || 'btn-default', {
            'btn-block': block,
            'btn-primary': primary
          }, level ? `btn-${level}` : '', size ? `btn-${size}` : '')}
        >
          {btnLabel || label}
          <i className="m-l-xs fa fa-angle-down" />
        </button>
        <ul
          className="dropdown-menu"
        >
          {buttons.map((button, key) => {
            if (button.visibleOn && !evalExpression(button.visibleOn, data)) {
              return null;
            } else if (button.hiddenOn && evalExpression(button.hiddenOn, data)) {
              return null;
            }

            return (
              <li
                key={key}
              >
                <a
                disabled={disabled || button.disabled}
                className={button.className}
                onClick={this.handleMenuItemClick.bind(this, button)}
                >{button.label}</a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}
